import React from 'react';
import PropTypes from 'prop-types';

/*
 * 给属性设置规则：prop-types 
 *   =>设置默认值 Vote.defaultProps={}
 *   =>设置传递的值类型和是否必传等 Vote.propTypes={}
 */
class Vote extends React.Component {
	static defaultProps = {
		supNum: 0,
		oppNum: 0
	};
	static propTypes = {
		title: PropTypes.string.isRequired,
		supNum: PropTypes.number,
		oppNum: PropTypes.number
	};

	//=>初始化状态：ES7中规定下述写法是直接给实例设置属性
	state = {
		//把传递的属性值赋值给状态，目的是后续可以修改这些值
		supNum: this.props.supNum,
		oppNum: this.props.oppNum
	};

	render() {
		let { title } = this.props;
		let { supNum, oppNum } = this.state;

		return <section>
			<header>
				<h3>{title}</h3>
				<span>N:{supNum + oppNum}</span>
			</header>
			<main>
				<p>支持人数：{supNum}</p>
				<p>反对人数：{oppNum}</p>
			</main>
			<footer>
				<button onClick={this.handle.bind(this, 0)}>支持</button>
				<button onClick={this.handle.bind(this, 1)}>反对</button>
			</footer>
		</section>;
	}
	handle = (type, ev) => {
		/*
		 * REACT中的事件绑定是合成事件绑定（获取的事件对象也是合成事件对象）
		 *  =>合成事件是基于事件委托实现的，目的是实现PC和移动端的兼容性，例如：移动端的click存在300MS延迟，我们设置的onClick在PC端被识别为click，在移动端被识别为touch事件模型
		 *  =>事件对象也是REACT内部合成的一套对象，但是对于我们获取和操作没有影响，因为它把每一个属性值都GET/SET了
		 *  =>ev.persist()
		 */
		if (type === 0) {
			//支持
			this.setState({
				supNum: this.state.supNum + 1
			});
			return;
		}
		//反对
		this.setState({
			oppNum: this.state.oppNum + 1
		});
	};
}

export default Vote;